import { Button, Divider, Layout, List, Typography } from "antd";
import { useCallback } from "react";
import { useNavigate } from "react-router";

const { Text } = Typography;

export const SiderScreen = () => {
  const data = [
    { title: "运行时间", data: 100 },
    { title: "内容数量", data: 1000 },
    { title: "浏览次数", data: 10000 },
  ];

  const nav = useNavigate();

  const showSetView = useCallback(() => {
    nav("/set", { replace: true });
  }, [nav]);

  return (
    <Layout className="siderBox">
      <List
        split={false}
        dataSource={data}
        renderItem={(item) => (
          <List.Item className="listItem">
            <Text> {item.title}</Text>
            <Text> {item.data}</Text>
          </List.Item>
        )}
      />
      <Divider></Divider>

      <Button type="link" className="setBtn" onClick={showSetView}>
        设置
      </Button>
    </Layout>
  );
};
